<script>
import { mapState } from 'vuex'
import { templateTypeEnum, transportTypeEnum } from '@/constants/essentialData/freight'
import FreightForm from '@/views/essentialData/freight/components/freightForm.vue'

export default {
  name: 'freight',
  components: { FreightForm },
  data() {
    return {
      /* 加载效果 */
      loading: true,
      /* 是否关闭对话框 */
      dialogVisible: false,
      /* 是否为编辑模式 */
      edit: false
    }
  },
  methods: {
    /*
    *
    * 获取运费模板列表的回调函数
    *  */
    async fetchFreightList() {
      try {
        await this.$store.dispatch('freightStore/fetchFreightListAction')
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /*
    * 格式化模板类型的回调函数
    *  */
    formatterTemplateType(row) {
      return templateTypeEnum[row.templateType]
    },
    /*
    *格式化运输类型的回调函数
    *  */
    formatterTransportType(row) {
      return transportTypeEnum[row.transportType]
    },
    /*
    *格式化关联城市的回调函数
    *  */
    formatterAssociatedCity(row) {

    },

    /*
    * 删除模板的回调函数
    *  */
    async handleDelete(row) {
      const confirm = await this.$confirm(`确定删除此模板类型吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const deleteResult = await this.$store.dispatch('freightStore/deleteFreightAction', row.id)
        await this.fetchFreightList()
        this.$message.success(deleteResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    * 新增模板的回调函数
    *  */
    handleAdd() {
      this.edit = false
      this.dialogVisible = true
    },

    /*
    *
    * 编辑模板的回调函数
    *  */
    handleEdit(row) {
      this.edit = true
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.freightFormRef.getFreightData(row)
      })
    },

    /*
    * 确定按钮的回调函数--添加或者编辑模板
    *  */
    async handleSubmit() {
      const validate = await this.$refs.freightFormRef.$refs.formRef.validate().catch(error => error)
      if (!validate) return
      try {
        await this.$refs.freightFormRef.submit(this.edit)
        await this.fetchFreightList()
        this.dialogVisible = false
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    *
    * 对话框关闭时的回调
    *  */
    closeDialog() {
      this.$refs.freightFormRef.clearFormData()
    }
  },
  computed: {
    ...mapState('freightStore', ['freightList']),
    title() {
      return this.edit ? '编辑模板' : '新增模板'
    }
  },
  mounted() {
    this.fetchFreightList()
  }
}
</script>

<template>
  <div class="freight">
    <el-card shadow="never" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <div class="header">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增模板</el-button>
      </div>
      <el-table :data="freightList" border stripe :header-cell-style="{background:'#f4f6f8',color:'#969393'}">
        <el-table-column prop="id" label="模板ID" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="formatterTemplateType" label="模板类型" align="center"></el-table-column>
        <el-table-column :formatter="formatterTransportType" label="运送类型" align="center"></el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市" align="center"></el-table-column>
        <el-table-column prop="firstWeight" label="首重(元)" align="center"></el-table-column>
        <el-table-column prop="continuousWeight" label="续重(元)" align="center"></el-table-column>
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" align="center"></el-table-column>
        <el-table-column prop="created" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updated" label="更新时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible" @close="closeDialog">
      <freight-form ref="freightFormRef"></freight-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.freight {
  padding: 20px;

  .el-table {
    margin: 10px 0;
  }
}
</style>
